<template>
  <el-row :gutter="12">
    <el-col
      v-for="(data, index) in summaryDatas"
      :key="index"
      :span="6"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="6"
    >
      <Card
        :icon="data.icon"
        :iconColor="data.iconColor"
        :title="data.title"
        :total="data.total"
        :percent="data.percent"
      ></Card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { markRaw } from 'vue';
import VisitsIcon from '@/components/VisitsIcon/index.vue';
import SalesIcon from '@/components/SalesIcon/index.vue';
import OrderVolumeIcon from '@/components/OrderVolumeIcon/index.vue';
import TurnoverIcon from '@/components/TurnoverIcon/index.vue';
import Card from './Card.vue';
import { reactive } from 'vue';
const summaryDatas = reactive([
  {
    icon: markRaw(VisitsIcon),
    title: '访问量',
    total: 98735,
    percent: 10,
    iconColor: '#40c9c6',
  },
  {
    icon: markRaw(SalesIcon),
    title: '销售额',
    total: 4572,
    percent: -20,
    iconColor: '#36a3f7',
  },
  {
    icon: markRaw(OrderVolumeIcon),
    title: '订单量',
    total: 3674,
    percent: 30,
    iconColor: '#f4516c',
  },
  {
    icon: markRaw(TurnoverIcon),
    title: '营业额',
    total: 298342,
    percent: 0,
    iconColor: '#34bfa3',
  },
]);
</script>
